<template>
  <div class="tab-bar">
    <div
      class="tab-bar-item"
      v-for="(item, index) in tabbarData"
      :key="index"
      @click="itemClick(item.path, index)"
    >
      <img v-if="selectIndex !== item.path" :src="getAssetImg(item.image)" alt="" />
      <img v-else :src="getAssetImg(item.imageActive)" alt="" />

      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getAssetImg } from '@/utils/getAssetImg.ts'

const route = useRoute()
const selectIndex = computed(() => route.path)
const router = useRouter()

const tabbarData = [
  {
    text: '首页',
    image: '@/assets/img/tabbar/home (2).png',
    imageActive: '@/assets/img/tabbar/home-active (2).png',
    path: '/home',
  },
  {
    text: '收藏',
    image: '@/assets/img/tabbar/favor.png',
    imageActive: '@/assets/img/tabbar/favor-active.png',
    path: '/favor',
  },
  {
    text: '订单',
    image: '@/assets/img/tabbar/order.png',
    imageActive: '@/assets/img/tabbar/order-active.png',
    path: '/order',
  },
  {
    text: '消息',
    image: '@/assets/img/tabbar/message.png',
    imageActive: '@/assets/img/tabbar/message-active.png',
    path: '/message',
  },
]
const itemClick = (path, index) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.tab-bar {
  z-index: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  height: 50px;
  background-color: #fff;
  .tab-bar-item {
    font-size: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &.active {
      color: var(--primary-color);
    }
  }
}
</style>
